import * as React from "react";
import { MarketingCaption } from "./MarketingCaption";
import { Box, Heading, Text, Card, Grid, Flex } from "@radix-ui/themes";

export const CommunitySection = () => {
	return (
		<>
			<Box mb="5">
				<Flex mb="1">
					<MarketingCaption mb="1">
						An active and friendly community
					</MarketingCaption>
					<Text size="3"> 👋</Text>
				</Flex>
				<Heading as="h2" size="7" mb="4">
					Join our fast-growing community
				</Heading>
			</Box>

			<Grid
				gap="3"
				justify="start"
				columns={{ xs: "1fr 1fr", sm: "repeat(4, 230px)" }}
			>
				<Card asChild>
					<a target="_blank" href="https://bsky.app/profile/radix-ui.com">
						<Box mb="3">
							<svg
								width="30"
								height="30"
								viewBox="0 0 26 26"
								fill="none"
								xmlns="http://www.w3.org/2000/svg"
							>
								<path
									d="M5.63587 3.54094C8.61671 5.77877 11.8229 10.3161 13.0001 12.7512C14.1774 10.3163 17.3834 5.77872 20.3643 3.54094C22.5152 1.92622 26 0.676836 26 4.65244C26 5.44642 25.5448 11.3223 25.2778 12.2762C24.3498 15.5927 20.9679 16.4386 17.9598 15.9266C23.218 16.8216 24.5556 19.7859 21.6668 22.7503C16.1804 28.3801 13.7813 21.3377 13.1662 19.5332C13.0535 19.2024 13.0008 19.0476 13 19.1792C12.9992 19.0476 12.9465 19.2024 12.8338 19.5332C12.2191 21.3377 9.81995 28.3803 4.33322 22.7503C1.44437 19.7859 2.78197 16.8214 8.0403 15.9266C5.03203 16.4386 1.65017 15.5927 0.722244 12.2762C0.455243 11.3222 3.05176e-05 5.44633 3.05176e-05 4.65244C3.05176e-05 0.676836 3.485 1.92622 5.63572 3.54094H5.63587Z"
									fill="#1185FE"
								/>
							</svg>
						</Box>
						<Heading as="h3" size="3" mb="1">
							Bluesky
						</Heading>
						<Text size="3" as="p" color="gray">
							For announcements, updates, and general Radix tips.
						</Text>
					</a>
				</Card>

				<Card asChild>
					<a target="_blank" href="https://discord.com/invite/7Xb99uG">
						<Box mb="3">
							<svg
								width="30"
								height="30"
								viewBox="0 0 30 30"
								fill="none"
								xmlns="http://www.w3.org/2000/svg"
							>
								<path
									fillRule="evenodd"
									clipRule="evenodd"
									d="M20.2373 24.1189C21 25.0595 21.9152 26.1528 21.9152 26.1528C27.2384 25.9842 29.4352 22.6892 29.6516 22.3647C29.6636 22.3467 29.6695 22.3379 29.6695 22.3392C29.6695 14.229 26.0085 7.64429 26.0085 7.64429C22.3729 4.92395 18.8898 5.00022 18.8898 5.00022L18.5339 5.40699C22.8559 6.7036 24.8644 8.61038 24.8644 8.61038C22.2203 7.18666 19.6271 6.4748 17.2119 6.19514C15.3813 5.99175 13.6271 6.0426 12.0763 6.24599C11.9431 6.24599 11.8293 6.26536 11.7011 6.2872C11.6824 6.29037 11.6634 6.29359 11.6441 6.29682C10.7542 6.39852 8.59322 6.70361 5.87288 7.89853C4.9322 8.30531 4.37288 8.61038 4.37288 8.61038C4.37288 8.61038 6.45763 6.60192 11.0339 5.3053L10.7797 5.00022C10.7797 5.00022 7.32203 4.92395 3.66102 7.64429C3.66102 7.64429 0 14.229 0 22.3392C0 22.3392 2.13559 26.0002 7.75424 26.1782C7.75424 26.1782 8.69491 25.0595 9.45763 24.0934C6.22881 23.1273 5.00847 21.1189 5.00847 21.1189C5.00847 21.1189 5.26271 21.2968 5.72034 21.5511C5.73605 21.5511 5.75176 21.5608 5.77348 21.5742C5.7869 21.5825 5.80261 21.5922 5.82203 21.6019C5.86017 21.6273 5.8983 21.6464 5.93644 21.6655C5.97458 21.6845 6.01271 21.7036 6.05085 21.729C6.68644 22.085 7.32203 22.3646 7.90678 22.5934C8.94915 23.0256 10.1949 23.407 11.6441 23.6867C13.5508 24.0426 15.7881 24.1697 18.2288 23.7121C19.4237 23.4833 20.6441 23.1528 21.9152 22.6189C22.8051 22.2884 23.7966 21.8053 24.839 21.1189C24.839 21.1189 23.5678 23.1782 20.2373 24.1189ZM16.7797 17.1782C16.7797 15.6273 17.9237 14.3816 19.3729 14.3816C20.7966 14.3816 21.9661 15.6273 21.9661 17.1782C21.9661 18.729 20.822 19.9748 19.3729 19.9748C17.9491 19.9748 16.7797 18.729 16.7797 17.1782ZM7.5 17.1782C7.5 15.6273 8.64407 14.3816 10.0932 14.3816C11.5424 14.3816 12.7119 15.6273 12.6864 17.1782C12.6864 18.729 11.5424 19.9748 10.0932 19.9748C8.66949 19.9748 7.5 18.729 7.5 17.1782Z"
									fill="#7289DA"
								/>
							</svg>
						</Box>
						<Heading as="h3" size="3" mb="1">
							Discord
						</Heading>
						<Text size="3" as="p" color="gray">
							To get involved in the community, ask questions, and share tips.
						</Text>
					</a>
				</Card>

				<Card asChild>
					<a target="_blank" href="https://github.com/radix-ui">
						<Box mb="3">
							<svg
								width="30"
								height="30"
								viewBox="0 0 30 30"
								fill="none"
								xmlns="http://www.w3.org/2000/svg"
							>
								<path
									fillRule="evenodd"
									clipRule="evenodd"
									d="M15.2988 2C7.95539 2 2 7.95459 2 15.3004C2 21.1758 5.81051 26.1612 11.0955 27.9208C11.761 28.0424 12.0035 27.6316 12.0035 27.279C12.0035 26.963 11.992 26.127 11.9855 25.0174C8.28607 25.8208 7.50551 23.2342 7.50551 23.2342C6.90049 21.6976 6.02851 21.2884 6.02851 21.2884C4.82093 20.4638 6.11995 20.4802 6.11995 20.4802C7.45489 20.574 8.15705 21.851 8.15705 21.851C9.34339 23.8832 11.2703 23.2962 12.028 22.9558C12.1488 22.0968 12.4925 21.5106 12.8722 21.1782C9.91901 20.8418 6.81395 19.7012 6.81395 14.6048C6.81395 13.1523 7.33241 11.9659 8.18319 11.036C8.04603 10.6996 7.58961 9.34749 8.31383 7.51613C8.31383 7.51613 9.42993 7.15851 11.9708 8.87881C13.0314 8.58407 14.1696 8.43711 15.3004 8.43139C16.4304 8.43711 17.5678 8.58407 18.63 8.87881C21.1692 7.15851 22.2836 7.51613 22.2836 7.51613C23.0096 9.34749 22.5532 10.6996 22.4168 11.036C23.2692 11.9659 23.7836 13.1523 23.7836 14.6048C23.7836 19.7143 20.6736 20.8386 17.7115 21.1676C18.1883 21.5784 18.6137 22.39 18.6137 23.631C18.6137 25.4084 18.5973 26.843 18.5973 27.279C18.5973 27.635 18.8374 28.049 19.5118 27.919C24.7928 26.1564 28.6 21.175 28.6 15.3004C28.6 7.95459 22.6446 2 15.2988 2Z"
									fill="currentcolor"
								/>
							</svg>
						</Box>
						<Heading as="h3" size="3" mb="1">
							GitHub
						</Heading>
						<Text size="3" as="p" color="gray">
							To file issues, request features, and contribute, check out our
							GitHub.
						</Text>
					</a>
				</Card>
			</Grid>
		</>
	);
};
